<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_personal.billInfo }}</view>
				<view @click="coinTypeVisible = true">{{ lang_common[coinType === 1 ? 'cash' : 'score'] }}</view>
			</view>
			
			<!-- tabs -->
			<view class="flex-center-around" style="padding: 14rpx 30rpx 26rpx;">
				<view
				v-for="(item, index) in tabs"
				:key="index"
				:class="['u-f-36 u-lh-50 tab-item', index === tabIndex ? 'font-medio' : 'color-grew']"
				@click="tabIndex = index">
					<view>{{ lang_personal[item.key] }}</view>
					
					<view v-if="tabIndex === index" class="tab-item-line"></view>
				</view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<swiper style="height: calc(100vh - 188rpx - var(--status-bar-height));" :current="tabIndex"
			@change="tabIndex = $event.detail.current">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<bill-list ref="mescrollItem" :i="index + 1" :index="tabIndex" :coin-type="coinType"></bill-list>
			</swiper-item>
		</swiper>
		
		<!-- 类型选择弹窗 -->
		<x-popup v-model="coinTypeVisible" mode="bottom" z-index="9999999" @close="coinTypeVisible = false">
			<view class="bg-white">
				<view v-for="(item, index) in coinTypes" :key="index">
					<u-gap v-if="index" height="0.5" bg-color="rgba(151,151,151,.2)"></u-gap>
					<view class="u-f-30 u-lh-42 u-text-center" style="padding: 36rpx 0;width: 100%;"
						@click="(coinType = item.value) && (coinTypeVisible = false)">{{ lang_common[item.key] }}
					</view>
				</view>
				<!-- 分割线 -->
				<u-gap height="8" bg-color="#F5F5F5"></u-gap>
				<view class="u-f-36 u-lh-50 flex-center-center" style="padding: 32rpx 0;"
					@click="coinTypeVisible = false">
					{{ lang_common.cancel }}
				</view>
			</view>
		</x-popup>
	</view>
</template>

<script>
	import billList from './components/bill-list.vue'

	export default {
		components: { billList },
		data() {
			// 初始化顶部导航栏
			let tabs = ['income', 'expenditure'].map((item, index) => {
				let result = {
					key: item,
					value: index
				}
				return result
			})
			
			return {
				tabs,
				tabIndex: 0,
				
				coinTypeVisible: false,
				coinType: 1,
				coinTypes: [{ key: 'cash', value: 1 }, { key: 'score', value: 2 }]
			}
		},
		// 获取类型
		onLoad({ type }) {
			if (type && type !== 'undefined') {
				this.coinType = (this.coinTypes.find(item => item.key === type) || { value: 1 }).value
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.tab-item {
		position: relative;
		top: 0;
		left: 0;
		width: max-content;
		
		&-line {
			position: absolute;
			bottom: -26rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 82rpx;
			height: 4rpx;
			background: #333333;
		}
	}
</style>
